<template>
	<div class="identity">
		<!--提示-->
		<div class="box-tip">{{ $t('message.authenticationTip') }}</div>
		<div class="v-identity">
      <v-identity @change-params="changeParams($event)"></v-identity>
		</div>
		<div class="next">
			<button type="button" class="btn btn-orange" :disabled="isNextDisabled" @click="next"><span :class="{ 'btn-loading': isLoading }">{{ $t('message.next') }}</span></button>
		</div>
	</div>
</template>
<script>
import VIdentity from '@/components/base/VIdentity'

export default {
  name: 'RegisterIdentity',
  components: {
    VIdentity
  },
  data () {
    return {
      userInfo: {
        school: '',
        schoolDistrict: '',
        grade: '',
        currentAddress: '',
        identifyCard: '',
        studentCard: '',
        selfHoldCard: ''
      },
      isNextDisabled: true,
      isLoading: false
    }
  },
  methods: {
    changeParams (val) {
      if (val === 'no') {
        this.isNextDisabled = true
      } else {
        this.userInfo = val
        this.isNextDisabled = false
      }
    },
    next () {
      // 控制点击次数
      if (this.isLoading) {
        return
      }
      var data = {
        school_district: this.userInfo.schoolDistrict,
        grade: this.userInfo.grade,
        now_address: this.userInfo.currentAddress,
        id_card_front_side_url: this.userInfo.identifyCard,
        student_front_side_url: this.userInfo.studentCard,
        holding_id_card_url: this.userInfo.selfHoldCard
      }
      // 显示loading图标
      this.isLoading = true
      this.$ajax.proveData(data).then((res) => {
        // 隐藏loading图标
        this.isLoading = false
        if (res.code === 200 || res.code === 205) {
          this.$router.push({ path: 'emergency' })
        } else if (res.code === 400) {
          // alertText: '参数错误，如缺少参数、url格式不正确'
          this.$store.commit('alert', {
            switch: true,
            alertText: this.$t('message.paramFault')
          })
        } else if (res.code === 4999) {
          // alertText: '数据库操作失败'
          this.$store.commit('alert', {
            switch: true,
            alertText: this.$t('message.dbOperateFailed')
          })
        } else if (res.code === 202) {
          // alertText: '用户没有登录'
          this.$store.commit('alert', {
            switch: true,
            alertText: this.$t('message.NoLogin')
          })
        }
      }).catch((err) => {
        // 隐藏loading图标
        this.isLoading = false
        this.$store.commit('alert', {
          switch: true
        })
      })
    }
  }
}
</script>

<style scoped>
.identity {
  width: 800px;
  margin: 60px auto 0;
  padding-bottom: 100px;
}

.v-identity {
  margin-top: 60px;
}

.next {
  text-align: center;
  margin-top: 100px;
}
.next button:disabled {
  cursor: not-allowed;
  background: #d7d7d7;
}
.btn {
  width: 376px;
  height: 48px;
  font-size: 16px;
  border-radius: 2px;
  cursor: pointer;
}
</style>
